<template>
  <Component
    :class="['tr-button-toggle','no-outline',styles.module]"
    v-bind="{ ...attrs, ...mappingProps }"
    v-show="mappingProps.visible"
    :spread="true"
    :ripple="false"
    :no-wrap="true"
    @update:model-value="showChannel()"
    @clear="clear()"
    :options="(mappingProps.itemsDataSourceType === 'option' || inDesign)
      ?  computedStaticItems(mappingProps.options)  : dynamicList(mappingProps.listDataSource)"
  >
    <template v-for="(v, k, a) in $slots" v-slot:[k]>
      <slot :name="k" />
    </template>
  </Component>
</template>

<script>
  import Component from '@teld/q-components/ButtonToggle';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { defineComponent } from 'vue';
import styles from './index.module.scss';
import './index.scss';
import { useI18n } from 'vue-i18n';
import label from '../label';
  export default defineComponent({
    name:"TButtonToggle",
    components: { Component },
    props: {
      ...commonProps,
      ...Component.props,
      itemsDataSourceType: {
        type: String,
        default() {
          return 'option';
        },
      },
      options: Array,
      listDataSource: Array,
      displayField: String,
      valueField: String,
      iconField: String,
    },
    emits: ['change', 'clear'],
    setup(props, { attrs, emit, expose, slots }) {
      const { t } = useI18n({ useScope: 'global' });
      const inDesign = !!window['fas']?.inDesign;
      const [mappingProps, mappingExpose] = useMappingProps(props);
      expose(mappingExpose);
        const dynamicList = list => {
        if (!(list instanceof Array))
          return [
            {
              [mappingProps.displayField]: '动态数据源',
              [mappingProps.valueField]: '1',
            },
          ];
        if (list.length == 0) {
          list = [
            {
              [mappingProps.displayField]: '动态数据源',
              [mappingProps.valueField]: '1',
            },
          ];
        }
        return list.map(item => {
          const obj = {
            label: item[mappingProps.displayField],
            value: item[mappingProps.valueField],
            icon: item[mappingProps.iconField]
          };
          return { ...item, ...obj };
        });
      };
      const computedStaticItems = list => {
        if (list) {
          return list.map(item => {
            if (item.ValueInfo_label) {
              return { ...item, label: t(item.ValueInfo_label.ReferenceExpr || "", item.label) }
            } else {
               return { ...item, label: t(item.ValueInfo_label || "", item.label) }
            }

          })
        }
      };
      function showChannel() {
        emit('change');
      }
      function clear() {
        emit('clear');
      }

      return { attrs, styles, mappingProps, showChannel, clear,dynamicList,inDesign,computedStaticItems };
    },
  });
</script>

<style lang="scss" scoped></style>
